<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutGroup}">

<head>
	<meta charset="UTF-8">
	<title>竞赛赛程</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="24">
				<el-button type="primary" @click="openRaceCourse(null)">添 加</el-button>
				<el-table :data="raceCourses" border highlight-current-row style="width: 100%">
					<!-- -->
					<!--<el-table-column prop="courseUserId" label="发布人">
						<template slot-scope="scope">
						{{scope.row.courseUser.accountName}}
						</template>
					</el-table-column>-->
					<el-table-column prop="courseTeacherId" label="指导老师">
						<template slot-scope="scope">
						{{scope.row.courseTeacher.accountName}}
						</template>
					</el-table-column>
					<el-table-column prop="courseTitle" label="标题"></el-table-column>
					<!--<el-table-column prop="courseSubtitle" label="副标题"></el-table-column>-->
					<el-table-column prop="courseImg" label="海报">
						<template slot-scope="scope">
							<img v-if="scope.row.courseImg" :src="scope.row.courseImg" class="avatar-sm">
						</template>
					</el-table-column>
					<el-table-column prop="courseContent" label="内容">
						<template slot-scope="scope">
						<el-button @click="viewRaceCourse(scope.row)" type="text" size="small">查看</el-button>
						</template>
					</el-table-column>
					<el-table-column prop="courseLimitDate" label="报名期限"></el-table-column>
					<el-table-column prop="courseStartDate" label="竞赛时间">
						<template slot-scope="scope">
						{{scope.row.courseStartDate}} ~ {{scope.row.courseEndDate}}
						</template>
					</el-table-column>
					<!--<el-table-column prop="courseTime" label="创建时间"></el-table-column>-->
					<el-table-column label="操作" width="160px">
						<template slot-scope="scope">
							<el-button @click="openRaceCourse(scope.row)" type="text" size="small">修 改</el-button>
							<el-popconfirm title="是否删除？" @confirm="delRaceCourse(scope.row.courseId)">
								<el-button slot="reference" type="text" size="small">删 除</el-button>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<!--弹框-->
		<el-dialog :title="raceCourseForm.ttitle" :visible.sync="raceCourseForm.visible" width="30%">
			<el-form :model="raceCourseForm" :rules="raceCourseRules" ref="raceCourseForm" label-width="100px">
				<!-- -->
				<el-form-item label="指导老师" prop="courseTeacherId">
					<el-select v-model="raceCourseForm.courseTeacherId" filterable placeholder="请选择">
					    <el-option
					      v-for="item in teachers"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
				    </el-select>
				</el-form-item>
				<el-form-item label="标题" prop="courseTitle">
					<el-input v-model="raceCourseForm.courseTitle"></el-input>
				</el-form-item>
				<!--<el-form-item label="副标题" prop="courseSubtitle">
					<el-input v-model="raceCourseForm.courseSubtitle"></el-input>
				</el-form-item>-->
				<el-form-item label="报名期限" prop="courseLimitDate">
				    <el-date-picker type="date" placeholder="截至日期" v-model="raceCourseForm.courseLimitDate" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>
				<el-form-item label="竞赛时间" >
					<!--<el-input v-model="raceCourseForm.courseStartDate"></el-input>-->
					<el-col :span="11">
				       <el-form-item prop="courseStartDate">
				      	<el-date-picker type="date" placeholder="开始日期" v-model="raceCourseForm.courseStartDate" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
				       </el-form-item>
				    </el-col>
				    <el-col class="line" :span="2">-</el-col>
				    <el-col :span="11">
				      <el-form-item prop="courseEndDate">
				      	<el-date-picker type="date" placeholder="结束日期" v-model="raceCourseForm.courseEndDate" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
				      </el-form-item>
				    </el-col>
				</el-form-item>
				<el-form-item label="海报" prop="courseImg">
					<el-upload class="avatar-uploader" action="/file/upload" :show-file-list="false"
						:on-success="handleUploadSuccess" :before-upload="beforeUploadImg">
						<img v-if="raceCourseForm.courseImg" :src="raceCourseForm.courseImg" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="内容" prop="courseContent">
					<el-input v-model="raceCourseForm.courseContent" type="textarea" :autosize="{ minRows: 5, maxRows: 10}"></el-input>
				</el-form-item>
				<!--<el-form-item label="竞赛结束时间" prop="courseEndDate">
					<el-input v-model="raceCourseForm.courseEndDate"></el-input>
				</el-form-item>-->
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeRaceCourse">取 消</el-button>
				<el-button type="primary" @click="saveRaceCourse">保 存</el-button>
			</span>
		</el-dialog>
		<!--弹框-->
		<el-dialog title="活动内容" :visible.sync="detailVisible" width="40%">
			<div v-html="raceCourseForm.courseContent"></div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeRaceCourseView">返回</el-button>
			</span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		raceCourses: [],
		teachers: [],
		selectRaceCourse: null,
		detailVisible: false,
		raceCourseForm: {
			visible: false,
			ttitle: '新增/修改',
			courseId : '',
			courseUserId : '',
			courseTeacherId : '',
			courseTitle : '',
			courseSubtitle : '',
			courseImg : '',
			courseContent : '',
			courseLimitDate : '',
			courseStartDate : '',
			courseEndDate : '',
			courseTime : '',
		},
		raceCourseQuery: {
			page: '',
			size: '',
		},
		raceCourseRules: {
			courseTeacherId: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			courseTitle: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			courseSubtitle: [
				{required: false, message: '不能为空', trigger: 'blur'}
			],
			courseImg: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			courseContent: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			courseLimitDate: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			courseStartDate: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			courseEndDate: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
		},
	}
	let vueMethods = {
		getRaceCourses() {
			let that = this
			postRequst('/getCourses', that.raceCourseQuery, true).then(function (resp) {
				that.raceCourses = resp.rows
				if (resp.rows && resp.rows.length > 0) {
					that.selectRaceCourse = resp.rows[0]
				}
			})
		},
		getTeachers() {
			let that = this
			postRequst('/user/getAccounts', {type: 1}, true).then(function (resp) {
				if (resp.rows && resp.rows.length > 0) {
					for(teacher of resp.rows){
						that.teachers.push({
							label: teacher.accountName,
							value: teacher.accountId
						})
					}
				}
			})
		},
		openRaceCourse(row) {
			let that = this
			if (row) {
				that.raceCourseForm.ttitle = '修改'
				that.raceCourseForm.courseId = row.courseId
				that.raceCourseForm.courseUserId = row.courseUserId
				that.raceCourseForm.courseTeacherId = row.courseTeacherId
				that.raceCourseForm.courseTitle = row.courseTitle
				that.raceCourseForm.courseSubtitle = row.courseSubtitle
				that.raceCourseForm.courseImg = row.courseImg
				that.raceCourseForm.courseContent = row.courseContent
				that.raceCourseForm.courseLimitDate = row.courseLimitDate
				that.raceCourseForm.courseStartDate = row.courseStartDate
				that.raceCourseForm.courseEndDate = row.courseEndDate
			} else {
				that.raceCourseForm.ttitle = '新增'
				that.raceCourseForm.courseId = ''
				that.raceCourseForm.courseUserId = ''
				that.raceCourseForm.courseTeacherId = ''
				that.raceCourseForm.courseTitle = ''
				that.raceCourseForm.courseSubtitle = ''
				that.raceCourseForm.courseImg = ''
				that.raceCourseForm.courseContent = ''
				that.raceCourseForm.courseLimitDate = ''
				that.raceCourseForm.courseStartDate = ''
				that.raceCourseForm.courseEndDate = ''
			}
			that.raceCourseForm.visible = true
		},
		closeRaceCourse() {
			this.$refs["raceCourseForm"].resetFields();
			this.raceCourseForm.visible = false
		},
		closeRaceCourseView() {
			this.detailVisible = false
		},
		saveRaceCourse() {
			let that = this
			this.$refs["raceCourseForm"].validate((valid) => {
				if (valid) {
					var url = '/saveCourse'
					if(that.raceCourseForm.courseId){
						url = '/updateCourse'
					}
					postRequst(url, that.raceCourseForm).then(function (resp) {
						if (resp.status == 0) {
							that.getRaceCourses()
							that.raceCourseForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		delRaceCourse(courseId) {
			let that = this
			postRequst('/delCourse', {courseId: courseId}, true).then(function (resp) {
				if (resp.status == 0) {
					that.getRaceCourses()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		viewRaceCourse(row) {
			let that = this
			that.raceCourseForm.courseContent = row.courseContent
			that.detailVisible = true
		},
		handleUploadSuccess(res, file) {
			let imageUrl = URL.createObjectURL(file.raw);
			this.raceCourseForm.courseImg = res.data
		}
	}
	function vueCreated() {
		let that = this
		that.getRaceCourses()
		that.getTeachers()
	}
</script>

</html>